<!--
 * @Descripttion: 编辑官网模块
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-23 15:45:59
-->
<template>
  <div class="lb-website-module">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="websiteForm"
        :rules="websiteFormRules"
        ref="websiteForm"
        label-width="140px"
      >
        <el-form-item label="模块名称" prop="name">
          <el-input
            v-model="websiteForm.name"
            placeholder="请输入模块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块名称" prop="show_name">
          <el-radio-group v-model="websiteForm.show_name">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
          <lb-tool-tips>前台是否显示模块名</lb-tool-tips>
        </el-form-item>
        <el-form-item label="顶部图标" prop="show_top">
          <el-radio-group v-model="websiteForm.show_top">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
          <lb-tool-tips>是否显示顶部图标</lb-tool-tips>
        </el-form-item>
        <el-form-item label="更多" prop="show_more">
          <el-radio-group v-model="websiteForm.show_more">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
          <lb-tool-tips>是否显示更多按钮</lb-tool-tips>
        </el-form-item>
        <el-form-item label="首页显示" prop="show">
          <el-radio-group v-model="websiteForm.show">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
          <lb-tool-tips>是否在首页显示</lb-tool-tips>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="websiteForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <div class="cover-tips">
            <el-link type="info" href="http://www.iconfont.cn/" target="_blank"
              >点击获取图标</el-link
            ><span>建议尺寸：100 * 100</span>
          </div>
        </el-form-item>
        <el-form-item label="模块类型" prop="type">
          <el-select
            :disabled="!!this.websiteForm.id"
            v-model="websiteForm.type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <lb-tool-tips>添加后不可修改</lb-tool-tips>
        </el-form-item>
        <el-form-item label="展示数量" prop="list_limit">
          <el-input-number
            class="lb-input-number"
            v-model="websiteForm.list_limit"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入展示数量"
          ></el-input-number>
          <lb-tool-tips
            >列表内容在首页展示数量，默认为3
            ，此设置仅对文章列表，招聘信息，员工展示，视频模块等列表元素有效</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="websiteForm.remark"
            placeholder="请输入备注"
          ></el-input>
          <lb-tool-tips>当选择表单模块时，此备注信息为模块描述</lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="websiteForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('websiteForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      navTitle: '',
      websiteForm: {
        name: '',
        show_name: 1,
        show_top: 1,
        show_more: 1,
        show: 1,
        cover: [],
        type: '',
        list_limit: 3,
        remark: '',
        top: 0
      },
      websiteFormRules: {
        name: { required: true, type: 'string', message: '请输入模块名称', trigger: 'blur' },
        show_name: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        show_top: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        show_more: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        show: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        cover: { required: true, type: 'array', message: '请输入上传图片', trigger: 'change' },
        type: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        list_limit: { required: true, type: 'number', message: '请输入展示数量', trigger: 'blur' },
        remark: { required: false, type: 'string', message: '请输入备注', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      },
      options: [
        {
          value: 1,
          label: '文章列表'
        },
        {
          value: 2,
          label: '图文详情'
        },
        {
          value: 3,
          label: '招聘信息'
        },
        {
          value: 4,
          label: '联系我们'
        },
        {
          value: 5,
          label: '员工展示'
        },
        {
          value: 6,
          label: '拨打电话'
        },
        {
          value: 7,
          label: '视频模块'
        },
        {
          value: 8,
          label: '表单模块'
        },
        {
          value: 9,
          label: '跳转网页'
        },
        {
          value: 10,
          label: '跳转小程序'
        }, {
          value: 11,
          label: '明星展示'
        }
      ]
    }
  },
  async created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.WebsiteModuleEdit' : 'menu.WebsiteModuleAdd')
    if (id) {
      this.websiteForm.id = id
      this.getFormInfo(id)
    }
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    getFormInfo (id) {
      this.$api.getWebsiteFormInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.websiteForm) {
            this.websiteForm[key] = res.data[key]
          }
          this.websiteForm.cover = [{ url: res.data.cover }]
        }
      })
    },
    /**
     * @method 获取封面图
     */
    getCover (img) {
      this.websiteForm.cover = img
    },
    /**
     * @method 提交表单信息
     */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { websiteForm } = this
          let subForm = JSON.parse(JSON.stringify(websiteForm))
          subForm.cover = subForm.cover.map(item => { return item.url })
          if (websiteForm.id) { // 编辑修改
            this.$api.editWebsiteInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successRev'))
                this.goBack()
              }
            })
          } else { // 添加
            this.$api.addWebsiteInfo(subForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-website-module {
  width: 100%;
  .page-main {
    width: 100%;
    .el-input,
    .el-select,
    .el-input-number {
      width: 300px;
    }
    .cover-tips {
      line-height: 1;
      margin-top: 20px;
      color: #a6a9ad;
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>
